<script setup>
import { computed, onMounted, ref } from 'vue';
import { getVideoCategoriesOptionsApi } from "@/api/video";

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update']);

// 表单数据的本地副本
const localForm = computed(() => ({
  title: props.formData.title,
  description: props.formData.description,
  tags: props.formData.tags,
  category: props.formData.category || '' // 添加分类字段
}));

// 预定义的视频分类列表
const categoryOptions = ref([
  { value: 'entertainment', label: '娱乐' },
  { value: 'gaming', label: '游戏' },
  { value: 'music', label: '音乐' },
  { value: 'knowledge', label: '知识' },
  { value: 'tech', label: '科技' },
  { value: 'life', label: '生活' },
  { value: 'sports', label: '运动健身' },
  { value: 'animation', label: '动画' },
  { value: 'food', label: '美食' },
  { value: 'travel', label: '旅游' },
  { value: 'fashion', label: '时尚' },
  { value: 'pets', label: '宠物' },
  { value: 'news', label: '资讯' },
  { value: 'education', label: '教育' },
  { value: 'other', label: '其他' }
]);


// 更新表单字段
const updateField = (field, value) => {
  emit('update', { [field]: value });
};

// 处理标签输入
const handleTagClose = (removedTag) => {
  const tags = props.formData.tags.filter(tag => tag !== removedTag);
  updateField('tags', tags);
};

const handleTagInputConfirm = (e) => {
  const value = e.target.value.trim();
  if (value) {
    if (!props.formData.tags.includes(value)) {
      const tags = [...props.formData.tags, value];
      updateField('tags', tags);
    }
  }
  e.target.value = '';
};


// 处理分类选择
const handleCategoryChange = (value) => {
  updateField('category', value);
};

const fetchCategoryOptions = async () => {
  try {
    const res = await getVideoCategoriesOptionsApi();
    categoryOptions.value = res;
  } catch (error) {
    console.error('获取视频分类列表失败:', error);
  }
};

onMounted(() => {
  fetchCategoryOptions();
});
</script>

<template>
  <div class="form-container">
    <el-form label-position="top">
      <el-form-item label="视频标题" required style="margin-bottom: 10px;">
        <el-input 
          v-model="localForm.title" 
          placeholder="请输入视频标题" 
          maxlength="100" 
          show-word-limit
          @input="updateField('title', $event)"
        />
      </el-form-item>
      
      <el-form-item label="视频描述" style="margin-bottom: 10px;">
        <el-input 
          v-model="localForm.description" 
          type="textarea" 
          placeholder="请输入视频描述" 
          :rows="4" 
          maxlength="2000" 
          show-word-limit
          @input="updateField('description', $event)"
        />
      </el-form-item>

      <!-- 添加视频分类字段 -->
      <el-form-item label="视频分类" required style="margin-bottom: 10px;">
        <el-select
          v-model="localForm.category"
          placeholder="请选择视频分类"
          style="width: 100%"
          @change="handleCategoryChange"
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="category-tip">请选择最符合视频内容的分类</div>
      </el-form-item>
      
      <!-- <el-form-item label="视频标签">
        <div class="tags-container">
          <el-tag
            v-for="tag in formData.tags"
            :key="tag"
            closable
            @close="handleTagClose(tag)"
          >
            {{ tag }}
          </el-tag>
          
          <input
            class="tag-input"
            placeholder="输入标签按回车确认"
            @keyup.enter="handleTagInputConfirm"
          />
        </div>
        <div class="tags-tip">最多可添加10个标签，每个标签不超过20个字符</div>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  margin-top: 24px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.tag-input {
  min-width: 100px;
  flex-grow: 1;
  height: 32px;
  padding: 0 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  outline: none;
  
  &:focus {
    border-color: #1890ff;
  }
}

.tags-tip,
.category-tip {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
}
</style>